<form class="layui-form layui-form-pane" lay-filter="FormBaseConstRegionImport" action="/base/const/region/import" enctype="multipart/form-data">
    <div class="layui-row p-l-sm m-b-xl">
        <div class="layui-row">
            <div class="layui-upload-drag m-t" id="importFile">
                <i class="layui-icon"></i>
                <p>点击上传文件，或将文件拖拽到此处</p>
            </div>
            <div class="layui-upload-list m-r">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:200px">文件名</th>
                        <th style="width:100px">大小</th>
                        <th style="width:100px">上传进度</th>
                    </tr>
                    </thead>
                    <tbody id="chooseFileBody"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="btnUploadFile" style="display: none">开始上传</button>
            <blockquote class="layui-elem-error errMsgBlock m-t-sm" style="display: none"></blockquote>
        </div>
    </div>
</form>
<script>
    layui.use(['upload', 'element', 'layer', 'form'], function () {
        let form = layui.form;
        form.render();
        let $ = layui.jquery;
        let upload = layui.upload;
        let element = layui.element
        let layer = layui.layer;
        //拖拽上传
        upload.render({
            elem: '#importFile',
            accept: 'file',
            multiple: false,
            drag: true,
            auto: false,
            bindAction: '#btnUploadFile',
            url: '/base/const/region/import',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    let layFilter = 'importFileProgress';
                    let tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td><div class="layui-progress" lay-filter="' + layFilter + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                        , '</tr>'].join(''));
                    $("#chooseFileBody").append(tr);
                    element.render('progress');
                    $(".errMsgBlock").hide();
                    $("#btnUploadFile").show();
                });
            },
            done: function (res, index, upload) {
                if ("200" === res.statusCode) {
                    $("#chooseFileBody").html('');
                    $("#btnUploadFile").hide();
                    layer.open({
                        title: "文件上传成功",
                        btn: ["继续上传文件", "返回列表页面"],
                        btnAlign: 'c',
                        shade: [0.8, '#393D49'],
                        area: ["300px", "200px"],
                        content: '<blockquote class="layui-elem-quote">' + res.message + '</blockquote>',
                        zIndex: layer.zIndex,
                        yes: function (index) {
                            layer.close(index);
                        },
                        btn2: function () {
                            layer.closeAll();
                            window.location.reload();
                        }
                    });
                } else {
                    $("#chooseFileBody").html('');
                    $("#btnUploadFile").hide();
                    $(".errMsgBlock").html("文件上传失败:" + res.message).show();
                }
            },
            error: function () {
                let layFilter = 'importFileProgress';
                element.progress(layFilter, '0%');
                $(".errMsgBlock").html("文件上传请求失败,请稍后重试...").show();
            },
            progress: function (n) {
                $(".errMsgBlock").hide();
                let layFilter = 'importFileProgress';
                element.progress(layFilter, n + '%');
            }
        });
    });
</script>